<template>
    <div class="add-ques-item">
      <div class="border-radius-md" style="border: 1px solid #99909399;width: 1000px;height: 150px">
        <el-row class="box-border" style="background: #F5F7FA;padding: 10px 20px;line-height: 40px">
          <el-col :span="6" align="left">
            <el-input v-model="ques.title" style="width: 200px" />
          </el-col>
          <el-col :span="2" align="left">
            {{typeStr}}
          </el-col>
          <el-col :span="4" align="left">
            <el-button @click="choose">选择试题</el-button>
          </el-col>
        </el-row>
        <el-row v-if="notEmpty" style="margin-top: 20px">
          <el-col  align="left">
            <span class="padding-sm-h">简单: {{ques.simpleCount}}</span>
            <span class="padding-sm-h">普通: {{ques.normalCount}}</span>
            <span class="padding-sm-h">复杂: {{ques.complexCount}}</span>
          </el-col>
        </el-row>
        <el-row v-else style="margin-top: 20px">
          当前题型还是空空如也，点击按钮添加试题！
        </el-row>
      </div>
    </div>
</template>

<script>
export default {
  mounted () {
    this.$bus.$on('alter-ques', (ques) => {
      Object.keys(ques).forEach((key) => {
        this.ques[key] = ques[key]
      })
    })
  },
  props: {
    ques: {
      type: Object,
      required: true
    }
  },
  computed: {
    notEmpty () {
      return this.ques.simpleCount + this.ques.normalCount + this.ques.complexCount > 0
    },
    typeStr () {
      return this.$converters.convertType(this.ques.type)
    }
  },
  methods: {
    choose () {
      // 让对话框进行修改
      this.$bus.$emit('show-choose-ques-dialog', this.ques.type, true)
    }
  }
}
</script>

<style scoped lang="less">

</style>
